<template>
	<view class="agreement">
		<image :src="agreeBgIMage" class="agreement-bg-image" />

		<view class="agreement-box">
			<view class="agreement-box-title">
				<text class="agreement-box-title-txt">欢迎使用 联联探客</text>
			</view>
			<view class="agreement-box-content">
				<text class="agreement-box-content-txt">
					感谢您对联联探客的信赖，在使用前请你务必审慎阅读、充分理解用户协议和隐私政策各条款，包括但不限于用户注意事项、用户行为规范以及为了想你提供服务而收集、使用、存储你个人信息的情况等。你可阅读
					<text class="agreement-box-content-txt-agree" @click="seeAgree">《联联探客服务协议》</text>
					和
					<text class="agreement-box-content-txt-agree" @click="seeAgree">《联联探客隐私政策》</text>
					了解详细信息。如你同意，请点击下方按钮开始接受我们的服务。
				</text>
			</view>
		</view>
		<view class="agreement-btn-box">
			<button class="agreement-btn-box-agree" @click="agree">同意并继续</button>

			<view class="agreement-btn-box-disagree" @click="disagree">
				<text>不同意</text>
			</view>
		</view>
		<AgreementModal v-model="AgreementModalShow" @agree="agree" />
	</view>
</template>

<script>
import AgreementModal from './components/AgreementModal.vue';
import { defaultImageUrl } from '@/utils';
import { setLocal } from '@/utils';

import srorageKey from '@/utils/srorage/key';

const webView = `${defaultImageUrl}webView/PlatformPrivacyAgreement.html`;

const agreeBgIMage = Object.freeze(`${defaultImageUrl}image/img_bg_xieyi.png`);
export default {
	name: 'Agreement',
	data() {
		return {
			AgreementModalShow: false,
			agreeBgIMage
		};
	},
	components: {
		AgreementModal
	},
	mounted() {},
	methods: {
		disagree() {
			this.AgreementModalShow = true;
		},
		seeAgree() {
			const url = `/tandianPage/CommonWebView?webView=${webView}`;
			uni.navigateTo({
				url
			});
		},
		agree() {
			setLocal(srorageKey.userAgreement, true);
			uni.switchTab({
				url: '/pages/tabBar/Index'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/common.scss';
.agreement {
	height: 100vh;

	display: flex;
	flex-direction: column;

	padding: 0 24rpx;
	background: #ffeec6;
	@include Db_iosTopDistance(64rpx);

	&-bg-image {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 614rpx;
	}

	&-box {
		flex: 1;
		position: relative;
		padding: 70rpx 40rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 32rpx 0rpx #e8ddd7;
		border-radius: 24rpx;
		&-title {
			padding-bottom: 40rpx;
			text-align: center;
			&-txt {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
		}
		&-content {
			&-txt {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				&-agree {
					color: #333333;
					font-weight: 600;
				}
			}
		}
	}

	&-btn-box {
		margin-top: 80rpx;
		@include Db_iosBottomDistance(40rpx);

		&-agree {
			height: 92rpx;

			@include Db_commonButton(92rpx, 24rpx);
		}

		&-disagree {
			margin-top: 32rpx;
			text-align: center;
			text {
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}
}
</style>
